<template>
  <div>
    <ChildSlot>
      <!-- 这种写法是旧版语法的写法 现在已经不被建议使用 -->
      <!-- <div v-slot:header></div> -->
      <!-- <template #header>
        <div>我是插入的header</div>
      </template> -->
      <!-- <div>
        我是插入的mian
      </div> -->
      <!-- <template #main>
        我是mian中的具名插槽
      </template>
      <template #footer>
        <div>我是插入的footer</div>
      </template> -->
      <template v-slot="scope">
        {{ scope.user.firstName }}
      </template>
    </ChildSlot>
  </div>
</template>

<script>
// 使用自定义组件的方法：
// 1、引入自定义组件
// 2、注册自定义组件
// 3、使用组件
import ChildSlot from './component/childSlot.vue'
export default {
  data () {
    return {
    }
  },

  components: {
    ChildSlot
  }
}

</script>
<style lang='less' scoped>
</style>
